<template>
  <div class="w2" style="height: 280px">
    <div class="flex-between">
      <span class="c-title">物理资源统计</span>
      <el-radio-group size="mini" v-model="isXc">
        <el-radio-button :label="true">信创</el-radio-button>
        <el-radio-button :label="false">非信创</el-radio-button>
      </el-radio-group>
    </div>
    <div class="charts">
      <div>
        <span>计算节点</span>
        <div id="computeNodeChart" class="chart"></div>
      </div>
      <div>
        <span>存储节点</span>
        <div id="storeNodeChart" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "Physicalresource",

  data() {
    return {
      isXc: false,
      computeData: [
        {
          key: "浪潮云",
          name: "浪潮云",
          value: 128345,
          GHz: 288345,
          unit: "台",
        },
        {
          key: "新华三云",
          name: "新华三云",
          value: 118845,
          GHz: 188345,
          unit: "台",
        },
        {
          key: "曙光云",
          name: "曙光云",
          value: 148834,
          GHz: 388345,
          unit: "台",
        },
      ],
      storeData: [
        {
          key: "浪潮云",
          name: "浪潮云",
          value: 128345,
          GHz: 288345,
          unit: "台",
        },
        {
          key: "新华三云",
          name: "新华三云",
          value: 118845,
          GHz: 188345,
          unit: "台",
        },
        {
          key: "曙光云",
          name: "曙光云",
          value: 148834,
          GHz: 388345,
          unit: "台",
        },
      ],
    };
  },

  watch: {
    isXc(v) {
      console.log("isXc: ", v);
    },
  },

  mounted() {
    this.dataInit();
  },

  methods: {
    dataInit() {
      this.chartPieInit("computeNodeChart", this.computeData);
      this.chartPieInit("storeNodeChart", this.storeData);
    },
    chartPieInit(id, data) {
      const c = echarts.init(document.getElementById(id));
      let total = 0;
      data.forEach((e) => {
        if (!e.value) e.value = 0;
        total += e.value;
        e.name = e.key;
      });

      c.setOption({
        animationDuration: 5000,
        tooltip: {
          trigger: "item",
          formatter(d) {
            const { data, marker, percent, value } = d;
            const { name, unit } = data;
            return [
              `<div>${marker}${name}</div>`,
              `<div>共计：${value} ${unit}</div>`,
              `<div>占比：${percent} ${"%"}</div>`,
            ].join("");
          },
        },
        series: {
          type: "pie",
          radius: ["15%", "50%"],
          // avoidLabelOverlap: false,
          hoverAnimation: false,
          itemStyle: {
            normal: {
              borderColor: "#fff",
              // borderWidth: 2,
              color(p) {
                if (total <= 0) return "#C0C4CC";
                const arr = [
                  "#2e76ff",
                  "#45c6fc",
                  "#ff6161",
                  "#f5d900",
                  "#7d7d7d",
                ];
                return arr[p.dataIndex];
              },
            },
          },
          data,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 270px;
  height: 170px;
}
</style>